<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>修改密码</title>
    <link rel="stylesheet" type="text/css" href="assets/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="assets/admin/css/admin.css"/>
    <style>
        .password-form {
            max-width: 500px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .form-title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        .layui-form-item {
            margin-bottom: 25px;
        }
        .layui-btn {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="password-form">
    <h2 class="form-title">修改密码</h2>
    <form class="layui-form" action="" lay-filter="passwordForm">
        <div class="layui-form-item">
            <label class="layui-form-label">原密码</label>
            <div class="layui-input-block">
                <input type="password" name="oldPassword" required lay-verify="required" placeholder="请输入原密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="newPassword" required lay-verify="required|pass" placeholder="请输入新密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="confirmPassword" required lay-verify="required|confirmPass" placeholder="请再次输入新密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="display: flex; justify-content: center; gap: 15px;">
                <button class="layui-btn" lay-submit lay-filter="updatePassword">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;

        // 自定义验证规则
        form.verify({
            pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ],
            confirmPass: function(value) {
                var newPassword = $('input[name=newPassword]').val();
                if(newPassword !== value) {
                    return '两次输入的密码不一致';
                }
            }
        });

        // 监听提交
        form.on('submit(updatePassword)', function(data){
            // 发送Ajax请求更新密码
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/student/updatePassword",
                data: data.field,
                success: function (result) {
                    if (result.code === "0") {
                        layer.msg('密码修改成功', {
                            icon: 1,
                            time: 1500
                        }, function(){
                            // 清空表单
                            $('input[name=oldPassword]').val('');
                            $('input[name=newPassword]').val('');
                            $('input[name=confirmPassword]').val('');
                            window.parent.location.href = "/login.html";
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2
                        });
                    }
                },
                error: function() {
                    layer.msg('服务器错误', {
                        icon: 5
                    });
                }
            });

            return false; // 阻止表单跳转
        });
    });
</script>
</body>
</html>
